<script setup lang="ts">
import StatisticsItem from './StatisticsItem.vue'
import type { StudentStatResp } from '@/apis/education/student'
import { StudentApi } from '@/apis'

const info = ref<StudentStatResp>()

const getDetai = async () => {
  const res = await StudentApi.getStudentStat()
  info.value = res
}

onMounted(() => {
  getDetai()
})
</script>

<template>
  <div class="student-stat">
    <div class="left">
      <StatisticsItem icon="count" tip="总学员数" :count="info?.totalCount" />
      <!-- <StatisticsItem icon="count" tip="未报名学员总数" :count="info?.noEnrollCount || 0" />
      <StatisticsItem icon="boy" tip="在读学员总数" :count="info?.onStudyCount || 0" />
      <StatisticsItem icon="girl" tip="结业学员总数" :count="info?.finishedCount || 0" /> -->
      <StatisticsItem icon="count" tip="今日新增数量" :count="`+${info?.todayCount || 0}`" count-color="#00B42A" />
    </div>
  </div>
</template>

<style scoped lang="less">
.student-stat {
  margin-left: 100px;
  display: flex;
  justify-content: space-between;
  .left {
    flex: 1;
    overflow: hidden;
    display: flex;
  }
  .right {
    flex-shrink: 0;
    z-index: 2;
  }
}
</style>
